﻿@model Icoders.MarketTracker.Core.MasterData.PointOfPurchase

@{
    ViewBag.Title = "Point of Point of Purchase";
}

<h2>Point of Point of Purchase Form</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Point of Point of Purchase</legend>
         @Html.HiddenFor(model => model.Id)
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>       

       
        <div class="editor-label">
            @Html.Label("Point Of Purchase Type")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.PointOfSaleTypeId, new SelectList(ViewBag.TypeList, "value", "text"), "----------Select Point of Purchase Type-----------")
            @*@Html.EditorFor(model => model.PointOfSaleTypeId)*@
            @Html.ValidationMessageFor(model => model.PointOfSaleTypeId)
        </div>

       

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Country, new SelectList(ViewBag.CountryList, "value", "text"), "----------Select Country-----------", new { @id = "Country" })
            @*@Html.EditorFor(model => model.Country)*@
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @*@Html.EditorFor(model => model.City)*@
            @Html.DropDownListFor(model => model.City, new SelectList(ViewBag.CityList, "value", "text"), "---------Select City---------", new { @id = "City" })
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Area)
        </div>
        <div class="editor-field">
            @*@Html.EditorFor(model => model.Area)*@
            @Html.DropDownListFor(model => model.Area, new SelectList(ViewBag.AreaList, "value", "text"), "---------Select Area---------", new { @id = "Area" })
            @Html.ValidationMessageFor(model => model.Area)
        </div>

         <div class="editor-label">
            @Html.Label("Zone")
        </div>
        <div class="editor-field">
            @*@Html.EditorFor(model => model.ZoneId)*@
            @Html.DropDownListFor(model => model.ZoneId, new SelectList(ViewBag.ZoneList, "value", "text"), "---------Select Zone---------", new { @id = "Zone" })
            @Html.ValidationMessageFor(model => model.ZoneId)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script type="text/javascript">
    $('#Country').change(function () {
        var selectedCountry = $(this).val();
        clearCity();
        clearArea();
        clearZone();
        if (selectedCountry != null && selectedCountry != '') {
            $.getJSON('@Url.Action("Cities")', { countyId: selectedCountry }, function (cities) {
                var citySelect = $('#City');
                $.each(cities, function (index, city) {
                    citySelect.append($('<option/>', {
                        value: city.Value,
                        text: city.Text
                    }));
                });
            });
        }
    });

    function clearCity() {
        var citySelect = $('#City');
        citySelect.empty();
        citySelect.append($('<option/>', {
            value: "",
            text: "-------------Select City-------"
        }));
    }
    function clearArea() {
        var select = $('#Area');
        select.empty();
        select.append($('<option/>', {
            value: "",
            text: "-------------Select Area-------"
        }));
    }
    function clearZone() {
        var select = $('#Zone');
        select.empty();
        select.append($('<option/>', {
            value: "",
            text: "-------------Select Zone-------"
        }));
    }
    $('#City').change(function () {
        var selectedCity = $(this).val();
        clearArea();
        clearZone();
        if (selectedCity != null && selectedCity != '') {
            $.getJSON('@Url.Action("Areas")', { cityId: selectedCity }, function (areas) {
                var areaSelect = $('#Area');
                $.each(areas, function (index, area) {
                    areaSelect.append($('<option/>', {
                        value: area.Value,
                        text: area.Text
                    }));
                });
            });
        }
    });
    $('#Area').change(function () {
        var selectedArea = $(this).val();
        clearZone();
        if (selectedArea != null && selectedArea != '') {
            $.getJSON('@Url.Action("Zones")', { areaId: selectedArea }, function (zones) {
                var zoneSelect = $('#Zone');
                $.each(zones, function (index, area) {
                    zoneSelect.append($('<option/>', {
                        value: area.Value,
                        text: area.Text
                    }));
                });
            });
        }
    });
</script>


